<template>
	<view class="page w-full bg-fffbf4 flex flex-col align-items-center pb-40">
		<z-paging ref="paging" v-model="listData" @query="queryList">
			<template #top>
				<view class="page-top-bg w-full h-750"></view>
				<view class="navBar w-full pl-30 pt-40 z-9999">
					<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
						牌位阁
						<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
					</view>
				</view>

				<view class="w-690 m-auto flex justif-between align-items-center mb-30 z-9999">
					<text class="text-581403 f-32 text-bold"></text>
					<view class="flex align-items-center text-581403 f-24">
						<text :class="[currentTab === 0 ? '': 'text-999']" @click="tabChange(0)">牌号顺序</text>
						<text class="ml-10 mr-10 text-999">|</text>
						<text :class="[currentTab === 1 ? '': 'text-999']" @click="tabChange(1)">上牌时间</text>
					</view>
				</view>
				<image src="/src/static/icon-14.png" class="action-icon" @click="show = true"></image>
			</template>
			<view class="w-690 m-auto">
				<view class="grid-box">
					<view class="list-item mt-20" v-for="(item,index) in listData" :key="index">
						<view class="top flex flex-col align-items-center">
							<text>{{item.name}}灵位</text>
						</view>
						<view class="bottom flex align-items-center f-20 text-581403 mt-20">
							{{item.tabletNumber}} {{ item.generation }}
						</view>
					</view>
				</view>
			</view>
		</z-paging>

		<wd-popup v-model="show" closable safe-area-inset-bottom position="bottom"
			custom-style="border-radius:32rpx 32rpx 0 0;padding:30rpx;" @close="">
			<wd-form ref="form" size="large" :model="formData">
				<wd-cell-group border>
					<wd-input label="牌位人姓名" label-width="100px" prop="nmae" clearable v-model="formData.nmae"
						placeholder="牌位人姓名" :rules="[{ required: true, message: '牌位人姓名' }]" />
					<wd-input label="辈分" label-width="100px" prop="generation" clearable v-model="formData.generation"
						placeholder="第十七代" :rules="[{ required: true, message: '辈分' }]" />
					<wd-input label="申请人姓名" label-width="100px" prop="applicant" clearable v-model="formData.applicant"
						placeholder="申请人姓名" :rules="[{ required: true, message: '申请人姓名' }]" />
					<wd-input type="number" label="联系电话" label-width="100px" prop="mobile" clearable
						v-model="formData.mobile" placeholder="联系电话" :rules="[{ required: true, message: '联系电话' }]" />
					<wd-textarea label="描述" label-width="100px" prop="describe" clearable auto-height :maxlength="100"
						v-model="formData.describe" placeholder="描述" />
				</wd-cell-group>
				<view class="w-full mt-30">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</wd-form>
		</wd-popup>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import {
		useUserStore
	} from "@/store/user";

	const {
		api_get_memorialNumberPage,
		api_get_memorialTimePage,
		api_post_memorial
	} = useRequest();
	const {
		proxy
	} = getCurrentInstance();

	const show = ref(false)
	const form = ref(null)
	const formData = reactive({
		name: '',
		generation: '',
		applicant: '',
		mobile: null,
		describe: '',
	})
	const handleSubmit = () => {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					show.value = false
					formData.tenantId = useUserStore().tenantId
					api_post_memorial(formData).then(res => {
						uni.showModal({
							title: '温馨提示',
							showCancel: false,
							content: '您的添加牌位申请已提交，后续工作人员会电话联系您，请注意接听。感谢您的支持！',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						})
					})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	const currentTab = ref(0)
	const tabChange = (index) => {
		params.value.type = index
		currentTab.value = index
		paging.value.reload()
	}

	const paging = ref(null);
	const listData = ref([]);
	const params = ref({})
	const queryList = (pageNo, pageSize) => {
		let d1 = Object.assign({
			page: pageNo - 1,
			size: 12
		}, {
			...params.value
		})
		let api = api_get_memorialNumberPage
		if (currentTab.value === 1) {
			api = api_get_memorialTimePage
		}
		api(d1).then(res => {
			paging.value.complete(res.content);
		}).catch(res => {
			paging.value.complete(false);
		});
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.page-top-bg {
		position: fixed;
		top: 0;
		height: 812rpx;
		background-image: url('@/static/bg-17.png');
		background-size: 100% 100%;
	}

	.action-icon {
		width: 96rpx;
		height: 106rpx;
		position: fixed;
		bottom: 300rpx;
		right: 10rpx;
		z-index: 999;
	}

	.grid-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3 列 */
		gap: 10px;

		.list-item {
			width: 210rpx;
			height: 324rpx;
			background-image: url('@/static/bg-18.png');
			background-size: 100% 100%;
			padding: 30rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.top {
				width: 120rpx;
				height: 216rpx;
				background-image: url('@/static/bg-13.png');
				background-size: 100% 100%;
				padding-top: 30rpx;
				color: #FFDF41;
				font-size: 20rpx;

				text {
					writing-mode: vertical-rl;
					text-orientation: upright;
				}
			}
		}
	}
</style>